<template>
  <div class="knowledge-page">


    <!-- 横幅部分 -->
    <div class="banner">
      <div class="banner-content">
        <h1>京剧知识库</h1>
        <p>博览古今 汲取精髓 深入了解</p>
      </div>
    </div>

        <!-- 页面标题和操作栏 -->
        <div class="page-header">
      <h2 class="page-title">知识库</h2>
      <div class="page-actions">
        <el-button type="primary" icon="el-icon-search" @click="showSearchPanel = !showSearchPanel">{{ showSearchPanel ? '收起搜索' : '展开搜索' }}</el-button>
      </div>
    </div>
    <!-- 搜索面板 -->
    <el-collapse-transition>
      <el-card shadow="hover" class="filter-card" v-show="showSearchPanel">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="关键词">
            <el-input 
              v-model="searchForm.keyword" 
              placeholder="搜索文章标题/内容" 
              prefix-icon="el-icon-search"
              clearable
              @clear="handleSearch"
              @keyup.enter.native="handleSearch"
            ></el-input>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="searchForm.categoryId" placeholder="全部分类" clearable>
              <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-collapse-transition>

    <!-- 知识列表 -->
    <div class="knowledge-container">
      <div class="knowledge-sidebar">
        <!-- 分类菜单 -->
        <el-card shadow="hover" class="category-card">
          <div slot="header" class="category-header">
            <span>知识分类</span>
          </div>
          <el-menu
            :default-active="activeCategory"
            class="category-menu"
            @select="handleCategorySelect"
          >
            <el-menu-item index="">
              <i class="el-icon-menu"></i>
              <span slot="title">全部分类</span>
            </el-menu-item>
            <el-menu-item 
              v-for="item in categoryOptions" 
              :key="item.categoryId" 
              :index="item.categoryId"
            >
              <i class="el-icon-document"></i>
              <span slot="title">{{ item.categoryName }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </div>
      
      <div class="knowledge-content">
        <!-- 推荐文章区域 -->
        <el-card 
          shadow="hover" 
          class="recommend-card" 
          v-if="recommendedArticles.length > 0"
        >
          <div class="recommend-header">
            <i class="el-icon-star-on"></i>
            <span>推荐阅读</span>
          </div>
          <el-carousel 
            v-if="recommendedArticles.length > 0" 
            :interval="5000" 
            arrow="always" 
            height="240px"
            indicator-position="outside"
            class="recommend-carousel"
          >
            <el-carousel-item v-for="article in recommendedArticles" :key="article.articleId">
              <div class="recommend-carousel-item" @click="viewArticleDetail(article)">
                <div class="recommend-content">
                  <h3 class="recommend-title">{{ article.title }}</h3>
                  <div class="recommend-meta">
                    <span class="recommend-category">
                      <i class="el-icon-collection-tag"></i>
                      {{ getCategoryName(article.categoryId) }}
                    </span>
                    <span class="recommend-date">
                      <i class="el-icon-date"></i>
                      {{ formatDateTime(article.createTime) }}
                    </span>
                  </div>
                  <el-button size="mini" type="warning" plain class="read-more-btn">
                    阅读全文 <i class="el-icon-arrow-right"></i>
                  </el-button>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-card>
        
        <!-- 文章列表 -->
        <el-card shadow="hover" class="article-card" v-loading="loading">
          <div class="knowledge-header">
            <span class="knowledge-title">{{ getCategoryTitle() }}</span>
            <!-- <div class="knowledge-tools">
              <span class="sort-label">排序方式：</span>
              <el-select v-model="sortBy" placeholder="排序方式" size="small" @change="handleSortChange">
                <el-option label="创建时间降序" value="createTimeDesc">
                  <span class="sort-option-label">
                    <i class="el-icon-time"></i> 创建时间降序
                  </span>
                </el-option>
                <el-option label="创建时间升序" value="createTimeAsc">
                  <span class="sort-option-label">
                    <i class="el-icon-time"></i> 创建时间升序
                  </span>
                </el-option>
                <el-option label="标题升序" value="titleAsc">
                  <span class="sort-option-label">
                    <i class="el-icon-document"></i> 标题升序
                  </span>
                </el-option>
                <el-option label="标题降序" value="titleDesc">
                  <span class="sort-option-label">
                    <i class="el-icon-document"></i> 标题降序
                  </span>
                </el-option>
                <el-option label="推荐优先" value="recommendFirst">
                  <span class="sort-option-label">
                    <i class="el-icon-star-on"></i> 推荐优先
                  </span>
                </el-option>
              </el-select>
            </div> -->
          </div>
          
          <!-- 知识文章列表 -->
          <transition-group name="article-list-transition" tag="div" class="article-list" v-if="articleList.length > 0">
            <div 
              v-for="article in articleList" 
              :key="article.articleId" 
              :class="['article-item', article.isRecommend === '1' ? 'article-recommended' : '']"
              @click="viewArticleDetail(article)"
            >
              <div v-if="article.isRecommend === '1'" class="recommend-ribbon">
                <span>推荐</span>
              </div>
              <div class="article-item-content">
                <h3 class="article-title">
                  <i v-if="article.isRecommend === '1'" class="el-icon-star-on recommend-icon"></i>
                  {{ article.title }}
                </h3>
                <div class="article-meta">
                  <span class="article-category">
                    <i class="el-icon-collection-tag"></i>
                    {{ getCategoryName(article.categoryId) }}
                  </span>
                  <span class="article-date">
                    <i class="el-icon-date"></i>
                    {{ formatDateTime(article.createTime) }}
                  </span>
                </div>
                <!-- <p class="article-summary" v-if="article.summary">{{ article.summary }}</p> -->
                <div class="article-footer">
                  <el-button size="mini" type="text" class="article-read-more">
                    阅读全文 <i class="el-icon-arrow-right"></i>
                  </el-button>
                </div>
              </div>
            </div>
          </transition-group>
          <el-empty v-else description="暂无知识内容"></el-empty>
          
          <!-- 分页 -->
          <div class="pagination-container" v-if="articleList.length > 0">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-sizes="[8, 16, 24, 32]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              background
            >
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 文章详情对话框 -->
    <el-dialog 
      :title="detailArticle.title" 
      :visible.sync="articleDetailVisible" 
      width="80%" 
      :fullscreen="isFullscreen"
      custom-class="article-detail-dialog"
    >
      <div class="dialog-header-actions">
        <el-button 
          type="text" 
          @click="isFullscreen = !isFullscreen"
          :icon="isFullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'"
        >
          {{ isFullscreen ? '退出全屏' : '全屏阅读' }}
        </el-button>
      </div>
      
      <div class="article-meta-info" v-if="detailArticle.articleId">
        <div class="meta-item">
          <span class="label">分类:</span>
          <span class="value">{{ getCategoryName(detailArticle.categoryId) }}</span>
        </div>
        <div class="meta-item">
          <span class="label">作者:</span>
          <span class="value">{{ detailArticle.authorName || '未知' }}</span>
        </div>
        <div class="meta-item">
          <span class="label">发布时间:</span>
          <span class="value">{{ formatDateTime(detailArticle.createTime) }}</span>
        </div>
      </div>
      
      <div class="article-content" v-loading="sectionLoading">
        <div v-for="(section) in sectionList" :key="section.sectionId" class="content-section">
          <!-- 图片类型的段落 -->
          <div v-if="section.mediaType === '0'" class="media-section image-section">
            <div class="image-container">
              <el-image 
                :src="section.mediaUrl" 
                fit="contain"
                :preview-src-list="[section.mediaUrl]"
              ></el-image>
            </div>
            <p v-if="section.mediaTitle" class="media-caption">{{ section.mediaTitle }}</p>
            <div class="section-content formatted-content" v-if="section.content" v-html="section.content"></div>
          </div>
          
          <!-- 视频类型的段落 -->
          <div v-else-if="section.mediaType === '1'" class="media-section video-section">
            <div class="video-container">
              <video 
                :src="section.mediaUrl" 
                controls 
                class="content-video"
              ></video>
            </div>
            <p v-if="section.mediaTitle" class="media-caption">{{ section.mediaTitle }}</p>
            <div class="section-content formatted-content" v-if="section.content" v-html="section.content"></div>
          </div>
          
          <!-- 纯文本类型的段落 -->
          <div v-else class="text-section">
            <h3 v-if="section.mediaTitle" class="section-title">{{ section.mediaTitle }}</h3>
            <div class="section-content formatted-content" v-html="section.content"></div>
          </div>
        </div>
        
        <el-empty v-if="sectionList.length === 0" description="暂无内容"></el-empty>
        
        <!-- 底部导航区
        <div v-if="sectionList.length > 0" class="article-footer-nav">
          <el-button 
            type="primary" 
            icon="el-icon-top" 
            circle
            size="mini"
            @click="scrollToTop"
            class="back-to-top-btn"
          ></el-button>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request'

export default {
  name: 'KnowledgeVue',
  data() {
    return {
      // 搜索表单
      searchForm: {
        keyword: '',
        categoryId: ''
      },
      // 是否显示搜索面板
      showSearchPanel: false,
      // 分页信息
      page: {
        currentPage: 1,
        pageSize: 8,
        total: 0
      },
      // 文章列表
      articleList: [],
      loading: false,
      // 分类选项
      categoryOptions: [],
      // 当前激活的分类
      activeCategory: '',
      // 排序方式
      sortBy: 'createTimeDesc',
      // 文章详情
      articleDetailVisible: false,
      detailArticle: {},
      isFullscreen: false,
      // 段落列表
      sectionList: [],
      sectionLoading: false,
      // 推荐文章列表
      recommendedArticles: []
    };
  },
  created() {
    document.title = '京剧苑 - 知识库';
    this.fetchCategoryOptions();
    this.fetchArticleList();
  },
  methods: {
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      const date = new Date(dateTime);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    
    // 获取分类名称
    getCategoryName(categoryId) {
      const category = this.categoryOptions.find(item => item.categoryId === categoryId);
      return category ? category.categoryName : '未分类';
    },
    
    // 获取分类标题
    getCategoryTitle() {
      if (!this.activeCategory) {
        return '全部知识';
      }
      const category = this.categoryOptions.find(item => item.categoryId === this.activeCategory);
      return category ? category.categoryName : '全部知识';
    },
    
    // 获取文章列表
    async fetchArticleList(isRecommendFirst = false) {
      this.loading = true;
      try {
        const params = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          title: this.searchForm.keyword,
          categoryId: this.activeCategory || this.searchForm.categoryId,
          status: '0', // 只获取已发布的文章
          token:''
        };
        
        // 添加排序参数，推荐优先排序在前端处理
        if (!isRecommendFirst) {
          switch (this.sortBy) {
            case 'createTimeDesc':
              params.orderBy = 'create_time';
              params.orderType = 'desc';
              break;
            case 'createTimeAsc':
              params.orderBy = 'create_time';
              params.orderType = 'asc';
              break;
            case 'titleAsc':
              params.orderBy = 'title';
              params.orderType = 'asc';
              break;
            case 'titleDesc':
              params.orderBy = 'title';
              params.orderType = 'desc';
              break;
          }
        } else {
          // 推荐优先使用默认创建时间降序作为后端排序
          params.orderBy = 'create_time';
          params.orderType = 'desc';
        }
        
        const res = await service.get('/api/study/article/getArticleList', { params });
        
        if (res.code === 200) {
          let articles = res.data.list || [];
          this.page.total = res.data.total || 0;
          
          // 如果是推荐优先排序，在前端对结果重新排序
          if (isRecommendFirst) {
            articles = this.sortArticlesByRecommend(articles);
          }
          
          this.articleList = articles;
          
          // 提取摘要
          this.articleList.forEach(article => {
            // 异步获取摘要
            this.fetchArticleSummary(article);
          });
          
          // 获取推荐文章
          this.fetchRecommendedArticles();
        } else {
          this.$message.error(res.message || '获取知识列表失败');
        }
        this.loading = false;
      } catch (error) {
        console.error('获取知识列表失败', error);
        this.$message.error('获取知识列表失败，请稍后重试');
        this.loading = false;
      }
    },
    
    // 获取文章摘要（从第一个文本段落中提取）
    async fetchArticleSummary(article) {
      try {
        const res = await service.get(`/api/study/section/getSectionList/${article.articleId}`);
        
        if (res.code === 200 && res.data && res.data.length > 0) {
          // 查找第一个纯文本段落
          const textSection = res.data.find(section => section.mediaType === '2');
          if (textSection && textSection.content) {
            // 提取摘要（去除HTML标签，最多显示100个字符）
            const content = textSection.content.replace(/<[^>]+>/g, '');
            article.summary = content.length > 100 ? content.substring(0, 100) + '...' : content;
          }
        }
      } catch (error) {
        console.error('获取文章摘要失败', error);
      }
    },
    
    // 获取分类选项
    async fetchCategoryOptions() {
      try {
        const res = await service.get('/api/study/category/getAllCategory');
        
        if (res.code === 200) {
          this.categoryOptions = (res.data || []).map(item => ({
            categoryId: item.categoryId,
            categoryName: item.categoryName
          }));
        } else {
          this.$message.error(res.message || '获取分类选项失败');
        }
      } catch (error) {
        console.error('获取分类选项失败', error);
        this.$message.error('获取分类选项失败，请稍后重试');
      }
    },
    
    // 处理查询
    handleSearch() {
      this.page.currentPage = 1;
      this.fetchArticleList();
    },
    
    // 重置查询条件
    resetSearch() {
      this.searchForm = {
        keyword: '',
        categoryId: ''
      };
      this.activeCategory = '';
      this.handleSearch();
    },
    
    // 处理分页大小变化
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.fetchArticleList();
    },
    
    // 处理当前页变化
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchArticleList();
    },
    
    // 处理分类选择
    handleCategorySelect(categoryId) {
      this.activeCategory = categoryId;
      this.page.currentPage = 1;
      this.fetchArticleList();
    },
    
    // 处理排序方式变化
    handleSortChange() {
      this.page.currentPage = 1;
      
      // 如果是推荐优先排序，需要在前端处理
      if (this.sortBy === 'recommendFirst') {
        this.fetchArticleList(true);
      } else {
        this.fetchArticleList();
      }
    },
    
    // 查看文章详情
    async viewArticleDetail(article) {
      this.detailArticle = { ...article };
      this.articleDetailVisible = true;
      await this.fetchArticleSections(article.articleId);
    },
    
    // 获取文章段落
    async fetchArticleSections(articleId) {
      this.sectionLoading = true;
      try {
        const res = await service.get(`/api/study/section/getSectionList/${articleId}`);
        
        if (res.code === 200) {
          this.sectionList = res.data || [];
          // 对段落按排序号排序
          this.sectionList.sort((a, b) => a.sortOrder - b.sortOrder);
        } else {
          this.$message.error(res.message || '获取文章内容失败');
        }
        this.sectionLoading = false;
      } catch (error) {
        console.error('获取文章内容失败', error);
        this.$message.error('获取文章内容失败，请稍后重试');
        this.sectionLoading = false;
      }
    },
    
    // 获取推荐文章
    async fetchRecommendedArticles() {
      try {
        // 若当前页已有推荐文章，则从当前页提取
        const recommended = this.articleList.filter(article => article.isRecommend === '1');
        
        if (recommended.length > 0) {
          this.recommendedArticles = [...recommended];
        } else {
          // 否则单独请求推荐文章
          const params = {
            pageNum: 1,
            pageSize: 5,
            isRecommend: '1',
            status: '0',
            token:''
          };
          
          const res = await service.get('/api/study/article/getArticleList', { params });
          
          if (res.code === 200) {
            this.recommendedArticles = res.data.list || [];
            
            // 提取摘要
            this.recommendedArticles.forEach(article => {
              if (!article.summary) {
                this.fetchArticleSummary(article);
              }
            });
          }
        }
      } catch (error) {
        console.error('获取推荐文章失败', error);
      }
    },
    
    // 滚动到页面顶部
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    
    // 按照推荐优先对文章进行排序
    sortArticlesByRecommend(articles) {
      return [...articles].sort((a, b) => {
        // 首先按照是否推荐排序
        if (a.isRecommend === '1' && b.isRecommend !== '1') {
          return -1; // a排在前面
        }
        if (a.isRecommend !== '1' && b.isRecommend === '1') {
          return 1; // b排在前面
        }
        
        // 如果推荐状态相同，则按照创建时间降序排序
        const timeA = new Date(a.createTime).getTime();
        const timeB = new Date(b.createTime).getTime();
        return timeB - timeA;
      });
    }
  }
};
</script>

<style scoped>
.knowledge-page {
  padding: 20px;
  background-color: #f9f5f0;
  min-height: 100vh;
}

.banner {
  height: 500px;
  background-image: url('../assets/opera_4.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  margin: -20px -20px 40px -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.banner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-content h1 {
  font-size: 4rem;
  font-family: 'STXingkai', 'STZhongsong', serif;
  margin-bottom: 15px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  color: #FFD700;
  letter-spacing: 10px;
  position: relative;
  display: inline-block;
}

.banner-content h1:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: #FFD700;
}

.banner-content p {
  font-size: 1.4rem;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 3px;
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 22px;
  font-weight: bold;
  color: #303133;
  margin: 0;
}

.page-actions {
  display: flex;
  gap: 10px;
}

.filter-card {
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  overflow: hidden;
}

.search-form {
  padding: 15px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.search-form .el-input__inner,
.search-form .el-select .el-input__inner {
  border-radius: 4px;
}

.search-form .el-button {
  border-radius: 4px;
  padding: 10px 20px;
}

.search-form .el-button--primary {
  background-color: #8B0000;
  border-color: #8B0000;
}

.search-form .el-button--primary:hover,
.search-form .el-button--primary:focus {
  background-color: #a50000;
  border-color: #a50000;
}

.article-title {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #8B0000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  transition: color 0.3s;
}

.article-item:hover .article-title {
  color: #a50000;
}

/* 知识内容布局 */
.knowledge-container {
  display: flex;
  gap: 25px;
  margin-bottom: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.knowledge-sidebar {
  width: 240px;
  flex-shrink: 0;
}

.knowledge-content {
  flex: 1;
}

.category-card {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.category-header {
  font-weight: bold;
  color: #8B0000;
  font-size: 16px;
  padding: 15px;
  background-color: #f9f5f0;
  border-bottom: 1px solid rgba(139, 0, 0, 0.1);
}

.category-menu {
  border-right: none;
}

.category-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  transition: all 0.3s;
}

.category-menu .el-menu-item:hover,
.category-menu .el-menu-item.is-active {
  color: #8B0000;
  background-color: #f9f5f0;
}

.category-menu .el-menu-item.is-active {
  border-left: 3px solid #8B0000;
}

.category-menu .el-menu-item i {
  margin-right: 8px;
  color: #8B0000;
}

.knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.knowledge-title {
  font-size: 20px;
  font-weight: bold;
  color: #8B0000;
  position: relative;
  padding-left: 12px;
  margin-bottom: 20px;
}

.knowledge-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #8B0000;
  border-radius: 2px;
}

.article-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  padding: 25px;
  padding-bottom: 30px;
}

/* 文章列表样式 */
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
  row-gap: 50px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.article-item {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  padding-bottom: 15px;
  transition: all 0.3s;
  cursor: pointer;
  height: 100%;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
  margin-bottom: 10px;
  transform: translateY(0);
}

.article-recommended {
  border: 1px solid rgba(230, 162, 60, 0.3);
  background-color: #fffaf2;
  box-shadow: 0 6px 16px 0 rgba(230, 162, 60, 0.1);
}

.article-recommended:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(230, 162, 60, 0.2);
  border-color: rgba(230, 162, 60, 0.5);
}

.recommend-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.recommend-ribbon span {
  position: absolute;
  top: 15px;
  right: -20px;
  display: block;
  width: 100px;
  padding: 5px 0;
  background-color: #E6A23C;
  color: #fff;
  text-align: center;
  transform: rotate(45deg);
  font-size: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.recommend-icon {
  color: #E6A23C;
  margin-right: 5px;
}

.article-item:hover {
  box-shadow: 0 6px 16px 0 rgba(139, 0, 0, 0.1);
  transform: translateY(-5px);
  border-color: rgba(139, 0, 0, 0.2);
}

.article-item-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 10px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #909399;
  font-size: 13px;
  margin-bottom: 20px;
}

.article-category,
.article-date {
  display: flex;
  align-items: center;
}

.article-category i,
.article-date i {
  margin-right: 5px;
}

.article-summary {
  margin: 0;
  color: #606266;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  flex: 1;
  min-height: 60px;
  max-height: 80px;
  position: relative;
}

.article-summary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.article-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 25px;
  position: relative;
  border-top: 1px dashed #f0f0f0;
  padding-top: 12px;
}

.article-read-more {
  color: #8B0000;
  font-weight: bold;
  padding: 0;
  transition: all 0.3s;
}

.article-read-more:hover {
  color: #a50000;
  transform: translateX(5px);
}

.article-read-more i {
  margin-left: 5px;
  transition: all 0.3s;
}

.article-item:hover .article-read-more i {
  transform: translateX(3px);
}

.read-more-btn {
  font-size: 14px;
  border-color: #E6A23C;
  color: #E6A23C;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s;
}

.read-more-btn:hover {
  background-color: #E6A23C;
  color: #fff;
  border-color: #E6A23C;
  transform: translateX(5px);
}

.read-more-btn i {
  margin-left: 5px;
  transition: all 0.3s;
}

.recommend-carousel-item:hover .read-more-btn i {
  transform: translateX(3px);
}

.pagination-container {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.pagination-container .el-pagination {
  padding: 15px 25px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container .el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  font-weight: 500;
  color: #606266;
}

.pagination-container .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #8B0000;
  border-color: #8B0000;
  color: #fff;
}

.pagination-container .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #8B0000;
  border-color: #8B0000;
}

.pagination-container .el-pagination .btn-prev,
.pagination-container .el-pagination .btn-next {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  color: #606266;
}

.pagination-container .el-pagination .btn-prev:hover,
.pagination-container .el-pagination .btn-next:hover {
  color: #8B0000;
  border-color: #8B0000;
}

.knowledge-tools {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.sort-label {
  font-size: 14px;
  color: #606266;
  margin-right: 8px;
  white-space: nowrap;
}

.knowledge-tools .el-select {
  width: 160px;
}

.knowledge-tools .el-input__inner {
  border-color: transparent;
  background-color: transparent;
  border-radius: 4px;
  font-size: 14px;
  padding-left: 0;
}

.knowledge-tools .el-select:hover .el-input__inner {
  border-color: transparent;
}

.knowledge-tools .el-select .el-input.is-focus .el-input__inner {
  border-color: transparent;
  box-shadow: none;
}

.sort-option-label {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.sort-option-label i {
  margin-right: 8px;
  color: #8B0000;
  font-size: 16px;
}

/* 自定义下拉框样式 */
.el-select-dropdown__item.selected {
  color: #8B0000;
}

.el-select-dropdown__item.selected .sort-option-label i {
  color: #8B0000;
}

.el-select-dropdown__item:hover {
  background-color: #f9f5f0;
}

/* 文章详情样式 */
.article-detail-dialog .el-dialog__header {
  padding: 15px 20px;
  background-color: #f9f5f0;
  border-bottom: 1px solid #ebeef5;
}

.article-detail-dialog .el-dialog__title {
  font-size: 20px;
  color: #8B0000;
  font-weight: bold;
}

.article-detail-dialog .el-dialog__body {
  padding: 20px;
}

.article-detail-dialog .el-dialog__headerbtn {
  top: 18px;
}

.dialog-header-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.dialog-header-actions .el-button {
  border-radius: 4px;
}

.article-meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px;
  background-color: #f9f5f0;
  border-radius: 8px;
  margin-bottom: 25px;
  border-left: 4px solid #8B0000;
  box-shadow: 0 2px 8px rgba(139, 0, 0, 0.1);
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-item .label {
  color: #909399;
  margin-right: 5px;
}

.meta-item .value {
  color: #8B0000;
  font-weight: 500;
}

.article-content {
  padding: 0 20px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
}

.content-section {
  margin-bottom: 50px;
  border-bottom: 1px dashed #e0e0e0;
  padding-bottom: 40px;
}

.content-section:last-child {
  border-bottom: none;
}

.media-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.media-caption {
  font-size: 14px;
  color: #606266;
  text-align: center;
  margin: 10px 0 20px;
  font-style: italic;
  max-width: 90%;
}

.section-title {
  width: 100%;
  margin-bottom: 20px;
  color: #8B0000;
  font-family: 'STZhongsong', serif;
  font-size: 1.5rem;
  position: relative;
  padding-left: 15px;
  border-left: 4px solid #8B0000;
  text-align: left;
}

.image-container {
  max-width: 70%;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.video-container {
  width: 70%;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.content-video {
  width: 100%;
  max-height: 450px;
}

.section-content {
  width: 100%;
  line-height: 1.8;
  color: #303133;
  word-break: break-word;
}

.formatted-content {
  font-size: 16px;
  letter-spacing: 0.5px;
}

.formatted-content p {
  margin: 0 0 20px;
  text-indent: 2em;
  line-height: 2;
}

.formatted-content p:last-child {
  margin-bottom: 0;
}

.formatted-content h1, 
.formatted-content h2, 
.formatted-content h3, 
.formatted-content h4, 
.formatted-content h5, 
.formatted-content h6 {
  margin: 30px 0 20px;
  color: #8B0000;
  font-weight: 500;
  border-bottom: 1px solid rgba(139, 0, 0, 0.1);
  padding-bottom: 10px;
}

.formatted-content h1 {
  font-size: 24px;
}

.formatted-content h2 {
  font-size: 22px;
}

.formatted-content h3 {
  font-size: 20px;
}

.formatted-content h4 {
  font-size: 18px;
}

.formatted-content ul, 
.formatted-content ol {
  padding-left: 2em;
  margin-bottom: 20px;
}

.formatted-content li {
  margin-bottom: 10px;
  line-height: 1.8;
}

.formatted-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.formatted-content blockquote {
  border-left: 4px solid #8B0000;
  margin: 20px 0;
  padding: 15px 20px;
  background-color: #f9f5f0;
  color: #666;
  font-style: italic;
}

.formatted-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  border-radius: 4px;
  overflow: hidden;
}

.formatted-content th, 
.formatted-content td {
  border: 1px solid #e0e0e0;
  padding: 12px 15px;
  text-align: left;
}

.formatted-content th {
  background-color: #f9f5f0;
  font-weight: 500;
  color: #8B0000;
}

.formatted-content tr:nth-child(even) {
  background-color: #f9f9f9;
}

.text-section .section-content {
  text-indent: 0;
  margin-top: 20px;
}

/* 全屏模式样式 */
.article-detail-dialog.is-fullscreen .article-content {
  max-width: 1000px;
  padding: 0 30px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .knowledge-container {
    flex-direction: column;
  }
  
  .knowledge-sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .article-list {
    grid-template-columns: 1fr;
    gap: 25px;
    row-gap: 30px;
  }
  
  .image-container,
  .video-container {
    width: 90%;
  }
  
  .banner {
    height: 220px;
  }
  
  .banner-content h1 {
    font-size: 2.5rem;
  }
  
  .banner-content p {
    font-size: 1.1rem;
  }
  
  .article-meta-info {
    flex-direction: column;
    gap: 10px;
  }
  
  .section-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
  
  .formatted-content {
    font-size: 15px;
  }
  
  .formatted-content p {
    margin: 0 0 15px;
    line-height: 1.8;
  }
  
  .content-section {
    margin-bottom: 35px;
    padding-bottom: 30px;
  }
  
  .recommend-carousel-item {
    padding: 0 20px;
  }
  
  .recommend-content {
    max-width: 100%;
  }
  
  .recommend-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .recommend-meta {
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
  }
  
  .article-content {
    padding: 0 15px;
  }
  
  .article-detail-dialog .el-dialog__body {
    padding: 15px;
  }
  
  .formatted-content h1 {
    font-size: 20px;
  }
  
  .formatted-content h2 {
    font-size: 18px;
  }
  
  .formatted-content h3 {
    font-size: 17px;
  }
  
  .formatted-content h4,
  .formatted-content h5, 
  .formatted-content h6 {
    font-size: 16px;
  }
  
  .formatted-content blockquote {
    padding: 10px 15px;
  }
  
  .article-detail-dialog.is-fullscreen .article-content {
    padding: 0 15px;
  }
  
  .media-caption {
    font-size: 13px;
    margin: 8px 0 15px;
  }
  
  .knowledge-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .knowledge-title {
    margin-bottom: 0;
  }
  
  .knowledge-tools {
    width: 100%;
    justify-content: space-between;
  }
  
  .knowledge-tools .el-select {
    width: 75%;
  }
  
  .sort-label {
    font-size: 13px;
  }
  
  .pagination-container {
    margin-top: 30px;
    padding-top: 15px;
  }
  
  .pagination-container .el-pagination {
    padding: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.recommend-card {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.recommend-header {
  display: flex;
  align-items: center;
  padding: 0 0 15px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 15px;
}

.recommend-header i {
  color: #E6A23C;
  font-size: 20px;
  margin-right: 8px;
}

.recommend-header span {
  font-size: 18px;
  font-weight: bold;
  color: #8B0000;
}

.recommend-carousel {
  margin-top: 20px;
}

.recommend-carousel .el-carousel__arrow {
  background-color: rgba(139, 0, 0, 0.7);
}

.recommend-carousel .el-carousel__indicators {
  bottom: -5px;
}

.recommend-carousel .el-carousel__indicator.is-active .el-carousel__button {
  background-color: #8B0000;
}

.recommend-carousel-item {
  height: 100%;
  cursor: pointer;
  position: relative;
  background: linear-gradient(135deg, #f9f5f0 0%, #fff 100%);
  display: flex;
  align-items: center;
  padding: 0 60px;
  border-radius: 8px;
  overflow: hidden;
}

.recommend-carousel-item:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(to right, rgba(230, 162, 60, 0) 0%, rgba(230, 162, 60, 0.1) 100%);
  z-index: 0;
}

.recommend-content {
  position: relative;
  z-index: 1;
  max-width: 80%;
  padding: 20px 0;
}

.recommend-title {
  font-size: 22px;
  color: #8B0000;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.recommend-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
  color: #606266;
  font-size: 14px;
}

.recommend-category,
.recommend-date {
  display: flex;
  align-items: center;
}

.recommend-category i,
.recommend-date i {
  margin-right: 5px;
  color: #E6A23C;
}

.read-more-btn:hover {
  background-color: #E6A23C;
  color: #fff;
  border-color: #E6A23C;
  transform: translateX(5px);
}

.read-more-btn i {
  margin-left: 5px;
  transition: all 0.3s;
}

.recommend-carousel-item:hover .read-more-btn i {
  transform: translateX(3px);
}

.article-footer-nav {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.back-to-top-btn {
  background-color: #8B0000;
  color: #fff;
  border-color: #8B0000;
}

.back-to-top-btn:hover {
  background-color: #a50000;
  border-color: #a50000;
}

/* 文章列表过渡动画 */
.article-list-transition-move {
  transition: transform 0.5s;
}

.article-list-transition-enter-active,
.article-list-transition-leave-active {
  transition: all 0.5s;
}

.article-list-transition-enter,
.article-list-transition-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.article-list-transition-leave-active {
  position: absolute;
}
</style> 